<script setup lang="ts">
import { onMounted } from 'vue'
import ComprehensiveAnalysisOfKeyIndicators from '../ComprehensiveAnalysisOfKeyIndicators/ComprehensiveAnalysisOfKeyIndicators.vue'

import useEnergyOverview from '../EnergyOverview/useEnergyOverview'
import useEnergyStructurePieChart from '../EnergyStructurePieChart/useEnergyStructurePieChart'
import useComprehensiveAnalysisOfKeyIndicators from '../ComprehensiveAnalysisOfKeyIndicators/useComprehensiveAnalysisOfKeyIndicators'
import EnergyOverview from '@/components/EnergyOverview/EnergyOverview.vue'
import EnergyStructurePieChart from '@/components/EnergyStructurePieChart/EnergyStructurePieChart.vue'

const {
  data: energyOverviewData,
  getEnergyOverview,
} = useEnergyOverview()
const {
  data: energyStructurePieChartData,
  getEnergyStructurePieChart,
} = useEnergyStructurePieChart()
const {
  lists: comprehensiveAnalysisOfKeyIndicatorsLists,
  title,
  active,
  unit,
  color,
  data,
  pause,
  play,
  interval,
  switchButton,
  getComprehensiveAnalysisOfKeyIndicators,
} = useComprehensiveAnalysisOfKeyIndicators()

function onMouseenter(item: any, i: number) {
  switchButton(item.name, i)
  pause()
}
function onMouseleave() {
  play()
}

onMounted(async () => {
  await getEnergyOverview()
  await getEnergyStructurePieChart()
  await getComprehensiveAnalysisOfKeyIndicators()
  interval()
})
</script>

<template>
  <aside class="position-absolute aside aside-left">
    <div class="h-100 px-sm-3 d-flex flex-column align-items-start justify-content-between aside-wrap">
      <EnergyOverview :data="energyOverviewData.slice(0, 6)" />
      <EnergyStructurePieChart
        :title="energyStructurePieChartData.name"
        :data="energyStructurePieChartData.data"
      />
      <ComprehensiveAnalysisOfKeyIndicators
        :title="title"
        :data="data" :unit="unit" :color="color"
        :name="active"
      >
        <div class="py-sm-3 text-center button-group">
          <a
            v-for="(item, index) in comprehensiveAnalysisOfKeyIndicatorsLists" :key="item.name"
            class="button button-btn" :class="{ active: active === item.name }"
            @click="switchButton(item.name, index % comprehensiveAnalysisOfKeyIndicatorsLists.length)"
            @mouseenter="onMouseenter(item, index % comprehensiveAnalysisOfKeyIndicatorsLists.length)"
            @mouseleave="onMouseleave"
          >{{ item.name }}</a>
        </div>
      </ComprehensiveAnalysisOfKeyIndicators>
    </div>
  </aside>
</template>

<style lang="scss" scoped>
.aside-left {
  background-image: url('./lock-left.png');
}
.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.button {
  appearance: none;
  display: inline-block;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 2px;
  color: #fff;
  font-size: 14px;
  text-decoration: none;
  background-color: rgba(29, 54, 86, 1);
  cursor: pointer;
  transition: all .3s;
}

$colors: rgba(84, 141, 216, 1) rgba(35, 84, 173, 1) rgba(89, 206, 255, 1) rgba(144, 255, 173, 1);

@each $color in $colors {
  $index: index($colors, $color);
  .button-btn:nth-child(#{$index}n).active {
    background: rgba($color, 0.2);
    color: $color;
  }
}
</style>
